<template>
  <div class="city-topics-page">
    <el-card
      class="aui-card--fill"
      shadow="never">
      <el-form inline>
        <el-form-item>
          <el-button
            @click="clickOnAddOrUpdate()"
            type="primary">
            <i class="el-icon-plus"/>
            <span>新增话题</span>
          </el-button>
        </el-form-item>
      </el-form>
      <div class="table-container">
        <el-table
          :data="dataList"
          border
          style="width: 100%;"
          v-loading="dataListLoading"
        >
          <el-table-column
            label="图片"
            prop="cityUrl">
            <template slot-scope="scope">
              <midea-admin-image
                :height="60"
                :previewable="true"
                :url="scope.row.cityUrl"
                :width="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="cityTitle"
            label="标题"/>

          <el-table-column
            prop="citySecondTitle"
            label="二级标题"
          />

          <el-table-column
            prop="citySummary"
            label="一句话描述"
          /><el-table-column
            prop="cityDetailDescribe"
            label="详细描述"
            show-overflow-tooltip
          />
          <el-table-column
            :label="$t('handle')"
            align="center"
            fixed="right"
            header-align="center"
            width="160"
          >
            <template slot-scope="scope">
              <el-button
                @click="clickOnAddOrUpdate(scope.row.id)"
                plain
                size="small"
                type="primary"
              >
                {{ $t("update") }}
              </el-button>
              <el-button
                @click="deleteHandle(scope.row.id)"
                plain
                size="small"
                type="danger"
              >{{ $t("delete") }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <citytopic-add-or-update
        @refreshDataList="getDataList"
        ref="addOrUpdate"
        v-if="addOrUpdateVisible"
      />
    </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'
import CitytopicAddOrUpdate from './citytopic-add-or-update'
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'CityTopicsPage',
  components: { CitytopicAddOrUpdate },
  mixins: [mixinViewModule],
  data () {
    return {
      // cities: [],
      // foodStories: [],
      mixinViewModuleOptions: {
        getDataListURL: '/midea/menu/foodmap/lovecitystopics/get',
        getDataListIsPage: false,
        deleteURL: '/midea/menu/foodmap/lovecitystopics/del'
        // deleteIsBatch: true
      },
      dataForm: {
        userId: 'manageUser',
        userName: 'manageUser',
        sex: '',
        age: 0,
        area: '',
        sn8: ''
        // cityId: ''
      }
    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    clickOnAddOrUpdate (id) {
      this.addOrUpdateVisible = true
      let model = this.dataList.find(item => {
        return item.id === id
      })
      this.$nextTick(() => {
        // this.$refs.addOrUpdate.reset()
        if (model) {
          // model
          this.$refs.addOrUpdate.form = cloneDeep(model)
        }

        this.$refs.addOrUpdate.init()
      })
    },
    // 重写delete handle
    deleteHandle (id) {
      if (
        this.mixinViewModuleOptions.deleteIsBatch &&
        !id &&
        this.dataListSelections.length <= 0
      ) {
        return this.$message({
          message: this.$t('prompt.deleteBatch'),
          type: 'warning',
          duration: 500
        })
      }
      this.$confirm(
        this.$t('prompt.info', { handle: this.$t('delete') }),
        this.$t('prompt.title'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          this.$http
            .post(
              `${this.mikeNetworkBase}${this.mixinViewModuleOptions.deleteURL}`,
              {
                id: id,
                user: {
                  userId: 'manageUser',
                  userName: 'manageUser'
                }
              }
            )
            .then(({ data: res }) => {
              if (res.code !== 200) {
                return this.$message.error(res.msg)
              }
              this.$message({
                message: this.$t('prompt.success'),
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.getDataList()
                }
              })
            })
            .catch(() => {})
            .finally(() => {
              loading.close()
            })
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
.city-topics-page {
}
</style>
